import {h, defineComponent, watch, resolveComponent,getCurrentInstance,ref ,onBeforeUnmount} from 'vue'
import ajax from '@/utils/ajax'
import {useInjectGridContext} from "@/components/grid/context";
import render from "@/components/render/render.vue";
import {cloneDeep} from "lodash"
import {state,action} from "@/store";
export default defineComponent({
    name:'ExModal',
    inheritAttrs:false,
    props:{
        name:{
            type:String,
            default:'AModal'
        },
        ajax:{
            type:[Object,Boolean],
            default:false
        },
        gridBatch:Boolean,
        visible:Boolean
    },
    setup(props,ctx){
        let gridRefreshAlway = false
        let gridRefresh = false
        const value = ref(false)
        const instance = getCurrentInstance()
        let grid = useInjectGridContext()
        watch(value,value=>{
            ctx.emit('update:visible',value)
        })
        watch(()=>props.visible,val=>{
            if(val){
                getRender()
            }else{
                value.value = false
                if(gridRefresh){
                    if(grid){
                        grid.exposed.refresh()
                    }
                    if(!gridRefreshAlway){
                        gridRefresh = false
                    }
                }
            }
        })
        if(props.visible){
            getRender()
        }

        let defaultSlot,footerSlot


        function formItemName(data,name){
            data.forEach(item=>{
                if (typeof(item) == 'object') {
                    if(item.name == 'AFormItem'){
                        item.attribute.noChangeName = true
                    }else if(item.content){
                        for (let slot in item.content){
                            formItemName(item.content[slot],name)
                        }
                    }
                }
            })
        }
        function getRender(params){

            if(props.ajax.url){
                let updateModel = null,selected = []
                if(ctx.attrs.scopeProp && ctx.attrs.scopeProp.row){
                    updateModel = ctx.attrs.scopeProp.row
                }
                if(props.gridBatch){
                    selected = grid.exposed.selectIds.value
                }
                const options = cloneDeep(props.ajax)
                if(Array.isArray(options.data)){
                    options.data = {}
                }
                Object.assign(options.data,params)
                ajax(options,props.gridBatch,selected,null,updateModel).then(res => {
                    //表单底部操作区渲染到弹窗footer
                    if (res.name === 'ExForm') {
                        if (ctx.attrs.scopeProp && ctx.attrs.scopeProp.row) {
                            formItemName(res.content.default, res.bindAttribute.model)
                        }
                        const footer = res.content.footer || []
                        delete res.content.footer
                        const footers = []
                        footer.forEach(item=>{
                            footers.push(h(render, {data:item,scopeProp:ctx.attrs.scopeProp}))
                        })
                        if(footers.length > 0){
                            footerSlot = ()=>footers
                        }

                        if (res.bindAttribute.stepCurrent) {
                            gridRefreshAlway = true
                            gridRefresh = true
                        }
                        //保存成功关闭弹窗
                        if (res.event.Success) {
                            res.event.Success.custom.forEach(function (e) {
                                if (e.type === 'CloseModal') {
                                    e.params = ctx.attrs.field
                                }
                            })
                        }
                        if(options.data.GridRefreshOff){
                            res.event.Success.custom.forEach((item,index)=>{
                                if(item.type == 'GridRefresh'){
                                    res.event.Success.custom.splice(index,1)
                                }
                            })
                        }
                    }
                    defaultSlot = ()=>h(render,{data:res,scopeProp:ctx.attrs.scopeProp})
                    instance.proxy.$forceUpdate()
                    value.value = true
                }).catch(()=>{
                    ctx.emit('update:visible',false)
                })
            }else{
                value.value = true
            }
        }

        function getSlots(){
            return {
                default:defaultSlot,
                footer:footerSlot
            }
        }
        function modalRefresh(params){
            gridRefresh = true
            getRender(params)
        }
        onBeforeUnmount(()=>{
            action.removeModal(ctx.attrs.field)
        })

        const setupObject = {
            field:ctx.attrs.field,
            value,
            getRender,
            modalRefresh,
            getSlots
        }

        state.modal.unshift(setupObject)
        return setupObject
    },
    render(e){

        let attrs = cloneDeep(e.$attrs)
        attrs.visible = e.value
        attrs['onUpdate:visible'] = value=>{
            e.value = value
        }
        let slots = cloneDeep(e.$slots)
        if(e.ajax.url){
            Object.assign(slots,e.getSlots())
            if(slots.footer){
                delete attrs.footer
            }
        }
        return h(resolveComponent(e.name), attrs,slots)
    }
})
